import { Tabs } from 'antd';
import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
import { YmDrawer } from 'ym-design';
import OfflinePersonDetail from '../components/OfflinePersonDetail';
import StudyOfflineDetail from '../components/StudyOfflineDetail';
import StudyPlanDetail from '../components/StudyPlanDetail';

export type DetailRef = { openDeatil(options?: any): void };

export const SafePlanDrawer = React.forwardRef<DetailRef, any>(function Detail({ typeobj }, ref) {
  const [isOpen, setIsOpen] = useState(false);
  const [selectkey, setSelectkey] = useState<string>('1');
  const [options, setOptions] = useState<any>();
  const handleChange = (value: string) => {
    setSelectkey(value);
  };
  useEffect(() => {
    console.log('typeobj', typeobj);
  }, [typeobj]);
  const tabList = useMemo<any>(() => {
    return [
      {
        label: '基本信息',
        children:
          typeobj.type == 'StudyOfflineDetail' ? (
            <StudyOfflineDetail planCourseId={typeobj.curPlanCourseId} />
          ) : (
            <StudyPlanDetail planCourseId={typeobj.curPlanCourseId} planType={typeobj.currPlanType} />
          ),
        key: '1',
      },
      {
        label: '培训人员情况',
        children: <OfflinePersonDetail planCourseId={typeobj.curPlanCourseId} />,
        key: '2',
      },
    ].filter((v) => (typeobj.type != 'StudyOfflineDetail' ? ['1'].includes(v.key) : true));
  }, [typeobj, options, isOpen]);

  useImperativeHandle(
    ref,
    () => {
      return {
        openDeatil: (options?: any) => {
          setOptions(options);
          setIsOpen(true);
          if (options?.key) {
            setSelectkey(options?.key || '1');
          } else {
            setSelectkey('1');
          }
        },
      };
    },
    [typeobj],
  );
  const handleDrawerClose = () => {
    setIsOpen(false);
  };

  return (
    <YmDrawer
      rootClassName="detail-drawer"
      title={'计划详情'}
      placement="right"
      width={800}
      closable={true}
      open={isOpen}
      size="large"
      destroyOnClose
      onClose={handleDrawerClose}
      onCancel={handleDrawerClose}
      zIndex={1000}
    >
      <Tabs className="drawer-tab" activeKey={selectkey} items={tabList} onChange={handleChange} />
    </YmDrawer>
  );
});
